<template>
  <uni-list>
    <uni-list-item
      :title="item.content"
      :note="item.createTime"
      v-for="item in noticeList"
      :key="item.id"
      ellipsis="3"
    >
      <template v-slot:header>
        <uni-icons color="#3382FF" type="sound-filled" size="22"></uni-icons>
      </template>
    </uni-list-item>
  </uni-list>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { findNoticeList } from '@/api/system'
import { onShow, onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

let noticeList = reactive([])
const total = ref(0)
const params = reactive({
  pageSize: 20,
  pageNum: 1
})

onLoad(() => getNoticeList())
console.log(1)

const getNoticeList = () => {
  uni.showLoading({ title: '加载中', mask: true })
  findNoticeList(params)
    .then((resp) => {
      const { code, data } = resp
      if (code === 200 && data) {
        total.value = Number(data.total)
        const resultData = data.records || []
        noticeList.push(...resultData)
        console.log(noticeList)
      }
    })
    .finally(() => {
      uni.hideLoading()
    })
}

onReachBottom(() => {
  if (noticeList.length >= total.value) {
    return
  }
  params.pageNum = params.pageNum + 1
  getNoticeList()
})

onPullDownRefresh(() => {
  params.pageSize = 15
  params.pageNum = 1
  noticeList = []
})
</script>

<style scoped>
.slot-box {
  padding-right: 10upx;
}
</style>
